<script setup>
    import { ref } from 'vue'
    import taskApi from '@/apis/task.js'
    import slVehicleViolation from './components/vehicle-violation'
    import slVehicleBreakdown from './components/vehicle-breakdown'
    import slVehicleAccident from './components/vehicle-accident'
    import { onLoad } from '@dcloudio/uni-app'
    import { useTaskStore } from '@/stores/task.js'

    const taskStore = useTaskStore()

  // 回车时间
  const dataTimePicker = ref('')

  onLoad((query) => {
      // 接收url的传参：
      /*quer格式
        {transportTaskId: '4071713105083814377', actualDepartureTime: '2024-09-22 10:29:39'}
      */
      // console.log(query)
      // 将仓库中的响应式对象id和startTime赋值
        taskStore.recordData.id = query.transportTaskId
        taskStore.recordData.startTime = query.actualDepartureTime
    })
  // 定义回车登记方法
  async function onFormSubmit() {
    let obj = taskStore.recordData

    // 2. 调用 task.js中的record方法完成数据提交
    let res = await taskApi.record(obj)
    console.log('回车登记:', res)
    if(res.data.code !== 200) {
      return uni.utils.toast(res.data.msg)
    }
    // 如果成功则跳转到task首页
    uni.switchTab({
      url:'/pages/task/index',
    })
  }
</script>
<template>
  <view class="page-container">
    <scroll-view class="scroll-view" scroll-y>
      <view class="scroll-view-wrapper">
        <uni-list class="base-info">
          <uni-list-item
            title="出车时间"
            show-arrow
            :right-text="taskStore.recordData.startTime"
          />
          <uni-list-item show-arrow title="回车时间">
            <template v-slot:footer>
              <uni-datetime-picker v-model="taskStore.recordData.endTime">
                <view class="picker-value">{{
                   taskStore.recordData.endTime || '请选择'
                }}</view>
              </uni-datetime-picker>
            </template>
          </uni-list-item>
        </uni-list>
        <!-- 交通违章 -->
        <sl-vehicle-violation></sl-vehicle-violation>
         <!-- 车辆故障 -->
        <sl-vehicle-breakdown></sl-vehicle-breakdown>
         <!--交通事故  -->
        <sl-vehicle-accident></sl-vehicle-accident>
      </view>
    </scroll-view>
    <view class="toolbar">
      <button class="button" @click="onFormSubmit">提交登记</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
